<template>
  <div class="ArtistDetail">
    <h1>ArtistDetail</h1>
    <h1>歌手详情公共部分</h1>
<!--
  router-link-exact-active router-link-active
  exact
  -->
    <router-link
      :to="{ name: 'ArtistDetailDetail', params: { id: $route.params.id } }"
      tag="b"
      exact-active-class="active"
    >
      默认
    </router-link>
    <router-link
      :to="{ name: 'ArtistDetailMV', params: { id: $route.params.id } }"
      tag="span"
      exact-active-class="active"
    >
      mv
    </router-link>
    <router-link
      :to="{ name: 'ArtistDetailDesc', params: { id: $route.params.id } }"
      exact-active-class="active"
    >
<!--      active-class="red"-->
<!--      exact-active-class="active"-->
      描述
    </router-link>
    <div style="border: 2px solid #00f">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArtistDetail"
}
</script>
<!--
http://localhost:8080/artist/5781
http://localhost:8080/artist/5781/mv
-->
<style scoped>
.active {
  color: red;
}
</style>
